$(function () { 
    $('.submenu').show();

    var page = 1;
    var pageSize = 5;

    function render() { 
        $.ajax({
            url:'/product/queryProductDetailList',
            type:'get',
            data:{
                page:page,
                pageSize:pageSize
            },
            success:function (data) { 
                console.log(data);
                var html=template('product-model',data);
                $('tbody').html(html);

                $(".pagination").bootstrapPaginator({
                    bootstrapMajorVersion: 3,
                    currentPage : page,
                    totalPages:Math.ceil(data.total / pageSize),
                    onPageClicked: function(a,b,c,index) {
                        page=index;
                        render();
                    }
                });
            }
        })
     }
     render();

     $('.addproduct').click(function () { 
         $('#addproduct-modal').modal('show');
      })


      $.ajax({
        url:'/category/querySecondCategoryPaging',
        type:'get',
        data:{
            page:1,
            pageSize:100
        },
        success:function (data) { 
            console.log(data);
            var html = template('product-dropdown',data);
            $('.dropdown-menu').html(html);
         }
      })

      $('.dropdown-menu').on('click','a',function () { 
          $('.dropdown-toggle .text').html($(this).html());
          $('.dropdown input').val($(this).data('id'));
          $form.data('bootstrapValidator').updateStatus("brandId", "VALID");
       })

       $('#fileupload').fileupload({
               dataType:'json',
               done:function (e,data) { 
                //    console.log(data.result);
                //    $('.form-group img').attr('src',data.result.picAddr);
                //    $("input[name=brandLogo]").val(data.result.picAddr);
                //    var validator = $("form").data('bootstrapValidator'); 
                //    validator.updateStatus("brandLogo", "VALID");
                console.log(data.result);
                var img = '<img data-name="'+data.result.picName+'" data-addr="'+data.result.picAddr+'" class="img-thumbnail" src="'+data.result.picAddr+'" >';

                $('.imgbox').append(img);
                if($('.imgbox img').length==3){
                    $form.data('bootstrapValidator').updateStatus("brandLogo", "VALID");
                }else {
                    $form.data('bootstrapValidator').updateStatus("brandLogo", "INVALID",'notEmpty');

                }
                }
           })

           var $form=$('form');
           $('button[type=submit]').click(function () { 
               $form.submit();
            })

            $form.bootstrapValidator({
                    excluded: [],
                       //1. 设置验证状态对应的小图标
                       feedbackIcons: {
                           //如果验证通过，显示的小图标
                           valid: 'glyphicon glyphicon-ok',
                           //验证不通过
                           invalid: 'glyphicon glyphicon-remove',
                           //正在验证的状态
                           validating: 'glyphicon glyphicon-refresh'
                       },
               
                       fields: {
                           brandId: {
                               validators: {
                                   //1. 规则,验证是否输入了字符
                                   notEmpty: {
                                       message: "请选择二级分类"
                                   }
                               }
                           },

                           proName: {
                               validators: {
                                   //1. 规则,验证是否输入了字符
                                   notEmpty: {
                                       message: "请输入商品名称"
                                   }
                               }
                           },

                           proDesc: {
                               validators: {
                                   //1. 规则,验证是否输入了字符
                                   notEmpty: {
                                       message: "请输入商品描述"
                                   }
                               }
                           },
                           num: {
                               validators: {
                                   //1. 规则,验证是否输入了字符
                                   notEmpty: {
                                       message: "请输入商品库存"
                                   }
                               }
                           },
                           size: {
                               validators: {
                                   //1. 规则,验证是否输入了字符
                                   notEmpty: {
                                       message: "请输入商品尺码"
                                   }
                               }
                           },
                           oldPrice: {
                               validators: {
                                   //1. 规则,验证是否输入了字符
                                   notEmpty: {
                                       message: "请输入商品原价"
                                   }
                               }
                           },
                           price: {
                               validators: {
                                   //1. 规则,验证是否输入了字符
                                   notEmpty: {
                                       message: "请输入商品价格"
                                   }
                               }
                           },
                           brandLogo: {
                            validators: {
                                //1. 规则,验证是否输入了字符
                                notEmpty: {
                                    message: "请上传三张图片"
                                }
                            }
                        }
                       }
                   });
               
                   //表单验证成功之后的事件处理
                   $form.on("success.form.bv", function(target) {
                       //阻止默认事件（提交表单）
                       target.preventDefault();
                       // alert("哈哈， 表单验证已成功");
                       // console.log($form.serialize());
               
                       var data = $form.serialize();

                        console.log(data);
                        data = data.replace('&brandLogo=',"");
                        console.log(data);

                        console.log($('.imgbox img').eq(0).data());

                        data = data +'&picName1='+$('.imgbox img').eq(0).data('name')+'&pinAddr1='+$('.imgbox img').eq(0).data('addr');

                        data = data+'&picName2='+$('.imgbox img').eq(1).data('name')+'&pinAddr2='+$('.imgbox img').eq(1).data('addr');

                        data = data+'&picName3='+$('.imgbox img').eq(2).data('name')+'&pinAddr3='+$('.imgbox img').eq(2).data('addr');

                        console.log(data);



                       $.ajax({
                           url: "/product/addProduct",
                           type: "POST",
                           data: data,
                           success: function(data) {
                               console.log(data);
                               if(data.success){
                                   
                                $('#addproduct-modal').modal('hide');
                                render();
                               }
                           }
                       });
                   });
              


});












      
    //    //设置验证规则
    //    $form.bootstrapValidator({
    //     excluded: [],
    //        //1. 设置验证状态对应的小图标
    //        feedbackIcons: {
    //            //如果验证通过，显示的小图标
    //            valid: 'glyphicon glyphicon-ok',
    //            //验证不通过
    //            invalid: 'glyphicon glyphicon-remove',
    //            //正在验证的状态
    //            validating: 'glyphicon glyphicon-refresh'
    //        },
   
    //        fields: {
    //         brandName: {
    //                validators: {
    //                    //1. 规则,验证是否输入了字符
    //                    notEmpty: {
    //                        message: "请输入二级分类的名称"
    //                    }
    //                }
    //            },
   
    //            categoryId: {
    //                validators: {
    //                    //1. 规则,验证是否输入了字符
    //                    notEmpty: {
    //                        message: "请选择一级分类"
    //                    }
    //                }
    //            },

    //            brandLogo: {
    //              validators: {
    //                 //1. 规则,验证是否输入了字符
    //                 notEmpty: {
    //                     message: "请上传图片"
    //                 }
    //             }
    //         }
    //        }
    //    });
   
    //    //表单验证成功之后的事件处理
    //    $form.on("success.form.bv", function(target) {
    //        //阻止默认事件（提交表单）
    //        target.preventDefault();
    //        // alert("哈哈， 表单验证已成功");
    //        // console.log($form.serialize());
   
    //        $.ajax({
    //            url: "/category/addSecondCategory",
    //            type: "POST",
    //            data: $form.serialize(),
    //            success: function(data) {
    //                console.log(data);
    //                if(data.success){
                       
    //                 $('#addcategory-modal').modal('hide');
    //                 render();
    //                }
    //            }
    //        });
    //    });
  